<template>
  <div class="home-wrap">
    <div class="header">
      <div class="header-content">
        <div class="banner">
          <img alt="Vue logo" style="width: 64px; height: 64px" src="../../assets/logo.png">
          <div class="text">

            <h3  >酷腾实验资源管理平台</h3>
            <p  >创新教育，赋能未来</p>
          </div>
        </div>
        <div class="header-tabs">
          <a-tabs defaultActiveKey="2" style="margin-top: 20px" @change="gotab">
            <a-tab-pane tab="器材" key="1">
            </a-tab-pane>
            <a-tab-pane tab="资源" key="2">
            </a-tab-pane>
            <a-tab-pane tab="实验" key="3">
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="header-user">
          <user-menu></user-menu>
        </div>
      </div>
    </div>
  <div class="home">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="关键字">
                <a-input v-model="queryParam.keywords" placeholder="搜索名称"/>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item
                      label="学科"
              >
                <a-select
                        optionFilterProp="title"
                        mode="default"
                        allowClear
                        v-model="queryParam.subject_id"
                        placeholder="选择学科"
                >
                  <a-select-option :key="option.id" v-for="option in subjectOptions" :title="option.name" :disabled="option.disabled" :value="option.id">{{option.name}}</a-select-option>
                </a-select>
              </a-form-item>

            </a-col>

            <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

    </a-card>


    <a-card :bordered="false">

    <s-table
            ref="table"
            size="default"
            :columns="columns"
            :data="loadData"
            :alert="{ show: true, clear: () => { this.selectedRowKeys = [] } }"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >

        <span slot="status" slot-scope="status,record">
        <a-badge status="success" v-if="status==1" text="显示" />
        <a-badge status="default" v-else text="隐藏" />
      </span>
      <span slot="action" slot-scope="text, record">
        <template >
          <a @click="download(record)">下载</a>
          <a-divider type="vertical" />
            <a-icon v-if="!record.is_collection" type="star"  @click="collectionAdd(record)" />
            <a-icon v-else type="star" theme="filled"  @click="collectionDelete(record)" />
        </template>

      </span>
    </s-table>
    </a-card>
  </div>
  </div>
</template>

<script>
  // @ is an alias to /src

  import Trend from '@/components/Trend'
  import AvatarList from '@/components/AvatarList'
  import CountDown from '@/components/CountDown/CountDown'
  import Ellipsis from '@/components/Ellipsis'
  import NumberInfo from '@/components/NumberInfo'
  import STable from '@/components/table/'

  import UserMenu from '@/components/tools/UserMenu'

  import {collectionAdd,collectionDelete , getResourceList, gradeOptions,
    learningSection, subjectOptions, gradeTreeOptions} from '@/api/resource'


  import setting from '@/config/setting'

  export default {
    name: 'Home',
    components: {
      NumberInfo,
      Ellipsis,
      CountDown,
      Trend,
      AvatarList,
      STable,
      UserMenu
    },
    data () {
      return {
        targetTime: new Date().getTime() + 3900000,
        queryParam:{

          pageNo:1,
        },
        advanced:false,
        loading:false,

        // 表头
        columns: [
          {
            title: '名称',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' },
          },
          {
            title: '年级',
            dataIndex: 'grade_name',
          },
          {
            title: '简介',
            dataIndex: 'desc',
            scopedSlots: { customRender: 'desc' },
          },
          {
            table: '操作',
            dataIndex: 'action',
            width: '250px',
            scopedSlots: { customRender: 'action' },
          }
        ],

        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData');
          console.log(this.queryParam);
          this.queryParam = Object.assign(this.queryParam,parameter);
          return getResourceList(this.queryParam)
                  .then(res => {
                    console.log('res');
                    return res.data
                  })
        },
        list:[
        ],
        subjectOptions:[
        ],
        yearOptions:[
        ],
        gradeOptions:[
        ],
        gradeTreeOptions:[
        ],
        learningSection:[
        ],
        selectedRowKeys: [],
        selectedRows: [],
        formData:{
          name:'',
          pic:[],
          file:[],
          id:0,
          rank:0,
          status:1,
          content:'',
        },

      }
    },
    mounted(){
      let that = this;
      that.getGradeTreeOptions();
      that.getLearningSection();
      that.getSubjectOptions();
    },
    methods: {

      learningSectionChange(){
        this.getGradeTreeOptions();
      },
      getSubjectOptions(){
        let that = this;
        subjectOptions()
                .then(res => {
                  console.log(res)
                  that.subjectOptions =  res.data
                })
      },
      getGradeOptions(){
        let that = this;
        gradeOptions()
                .then(res => {
                  console.log(res)
                  that.gradeOptions =  res.data
                })
      },

      getGradeTreeOptions(){
        let that = this;
        gradeTreeOptions({
          learning_section_id: that.formData.learning_section_id
        })
                .then(res => {
                  that.gradeTreeOptions =  res.data;
                })
      },

      getCateOptions(){
        let that = this;
        gradeTreeOptions({
          learning_section_id: that.formData.learning_section_id
        })
                .then(res => {
                  that.cateOptions =  res.data;
                  that.gradeTreeOptions =  res.data
                })
      },
      getLearningSection(){
        let that = this;
        learningSection()
                .then(res => {
                  console.log(res)
                  that.learningSection =  res.data
                })
      },
      onSearch(){
        let self = this;
        self.$refs.table.refresh(true)
      },
      collectionAdd(record){
        let self = this
        record.is_collection = true;
        collectionAdd({ collection_id: record.id  }).then(res => {
          self.$message.success('收藏成功')

          self.$refs.table.refresh(true)
        }).catch(err =>{
          self.$message.error(err.data.msg)
        })

      },
      collectionDelete(record){
        let self = this
        console.log('delete');
        record.is_collection = false;
        collectionDelete({ collection_id: record.id  }).then(res => {

          self.$refs.table.refresh(true)
        }).catch(err =>{
          self.$message.error(err.data.msg)
        })

      },

      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      gotab(index){
        console.log(index)
        switch (index) {
          case '1' :
            this.$router.push({name:'HomeMaterialList'});
            break;
          case '2' :
            this.$router.push({name:'HomeResourseList'});
            break;
          case '3' :
            this.$router.push({name:'HomeExperimentList'});
            break;

        }
      },
      download(record){
        if(record.file.length==0){
          this.$message.error('文件不存在')
          return ;
        }
        window.open(setting.apiBaseURL+'/api/index/dlf?name='+record.file[0].name+'&url='+record.file[0].url);
      }
    }
  }
</script>
<style>

  .header-tabs   .ant-tabs-bar{
    border: none !important;
  }

  .header-user .action {
    cursor: pointer;
    padding: 0 12px;
    display: inline-block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height: 100%;
  }
  .header-user .avatar {
    margin: 20px 8px 20px 0;
    color: #1890ff;
    background: hsla(0, 0%, 100%, 0.85);
    vertical-align: middle;
  }

</style>
<style  lang="less" scoped>

  .home-wrap{
    background-color: #F0F2F9;
  }
  .header{
    height: 74px;
    padding: 0 12px 0 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    position: fixed;
    top:0;
    left: 0;
    z-index: 10;
    right: 0;
  }
  .header-content{
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0 ;
  }
  .header-content .banner{
    float: left;
    margin-right: 20px;
  }
  .header-content .banner img {
    float: left;
    margin-right: 10px;
  }
  .header-content .banner .text {
    float: left;
    width: 200px;
  }
  .header-content .header-tabs{
    float: left;
  }
  .header-content .header-user{
    float: right;
  }

  .home {
    width: 1200px;
    margin: 64px auto;
    padding: 25px 0;

  }

  .ant-pro-pages-list-projects-cardList {
    margin-top: 24px;

    /deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }

    /deep/ .ant-card-meta-description {
      height: 44px;
      overflow: hidden;
      line-height: 22px;
    }

    .cardItemContent {
      display: flex;
      height: 20px;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;

      > span {
        flex: 1 1;
        color: rgba(0,0,0,.45);
        font-size: 12px;
      }

      /deep/ .ant-pro-avatar-list {
        flex: 0 1 auto;
      }
    }
  }
</style>
